<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Rasende Roboter</title>
        <script type="text/javascript" src="socket.io/socket.io.js"></script>
        <script type="text/javascript" src="js/loginfish.js"></script>
        <script type="text/javascript" src="js/libs/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/interface.js"></script>

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="css/loginfish.css" />
    </head>

    <body onload="init('fish')">

        <div class="container">
            <div class="page-header">
                <p class="h1"><img src="img/logo-large.png" alt="logo" /></p>
                <p class="h4">Bienvenu sur le site de jeu en ligne</p>
            </div>

            <p class="h3">Démarre le jeu en 3 clicks</p>

            <form method="post" action="" id="nouvellePartie" onsubmit="return checkField()">
                <div class="row">
                    <div class="col-lg-4">
                        <p class="h4"><strong>1.</strong> Indique ton login</p>
                    </div>
                    <div class="col-lg-4">
                        <input type="text" class="form-control" placeholder="Login" name="login" id="login" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4">
                        <p class="h4"><strong>2.</strong> <span id="celluleLabelNouveau">Crée ta partie</span></p>
                    </div>
                    <div class="col-lg-1" id="celluleChoixNouveau" style="display:none">
                        <input type="radio" name="choix" id="choixNouveau" value="new" checked="checked" />
                    </div>
                    <div class="col-lg-4" id="celluleNomPartie">
                        <input type="text" class="form-control" placeholder="Nom de la nouvelle partie" id="nouveauNom" onclick="document.getElementById('choixNouveau').checked = true;"/>
                    </div>
                </div>

                <div class="row" id="lignesListeParties">
                    <div class="col-lg-4">
                    </div>
                    <div class="col-lg-1">
                        <input type="radio" name="choix" id="choixExistant"  value="existant"/>
                    </div>
                    <div class="col-lg-3" style="text-align:center">
                        <div id="fisheye" class="fisheye">
                            <div class="fisheyeContainter" id="lesParties">
                            </div>
                        </div> 
                        <input type="hidden" value="" name="idPartieChoisie" id="idPartieChoisie"/>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4">
                        <p class="h4"><strong>3.</strong> Chauffe tes méninges et lance toi !</p>
                    </div>
                    <div class="col-lg-4">
                        <button class="btn btn-lg btn-primary btn-block" type="submit">Joue</button>
                    </div>
                </div>
                <input type="hidden" value="" name="idGame" id="idGame" />
                <input type="hidden" value="norm" name="typeAction" />
            </form>

            <div class="modal-footer">
                Mini-projet IHM de M2 MIAGE...
            </div>
        </div>
    </body>
</html>

